<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>爱V猫友情链接</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			
			
			/* 顶部样式 */
			.top{
				/* 弹性容器 */
				display: flex;
				width: 50%;
				margin: 0 auto;
			}
			/* 顶部子元素 */
			.top>div{
				flex: 1;
			}
			
			/* 用弹性布局让登录居中 */
			.login{
				/* 弹性容器 */
				display: flex;
				/* 水平居右 */
				justify-content: flex-end;
				/* 垂直居中 */
				align-items: center;
			}
			
			
			/* 主体部分 */
			.main{
				background-color: aqua;
				/* 弹性盒子 */
				display: flex;
				/* 左右居中 */
				justify-content: center;
				padding: 5px 0;
			}
			
			.main>div{
				width: 60%;
				/* 弹性盒子 */
				display: flex;
			}
			/* 左侧菜单 */
			.main .left{
				width: 200px;
				background-color: #999;
				padding-top: 5%;
			}
			
			.main .left a{
				/* 行内块--可以设置宽高 */
				display: inline-block;
				width: 100%;
				height: 30px;
				line-height: 30px;
				color: red;
				text-align: center;
				
			}
			.main .left a:hover{
				color: #fff;
				background-color: red;
			}
			/* 右侧友情链接 */
			.main .right{  /*右边父元素*/
				background-color: #fff;
				/* 元素的自动放大 */
				flex: 1;  /* 把这个子元素的默认宽度设置为0 ，让他去自动缩放*/
				padding: 30px;
			}
			.main .right h1{
				padding-bottom: 20px;
				color: #999;
				border-bottom: 1px solid #999;
			}
			.main .right ul{
				padding: 10px;
				/* 弹性盒子 */
				display: flex;
				/* 自动换行 */
				flex-wrap: wrap;
				/* 水平对齐 -两边不留空隙的分散对齐*/
				justify-content: space-between;
			}
			.main .right ul li{
				border: 1px solid #999;
				margin-bottom: 30px;
				
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div>
				<img src="./img/logo.jpg" alt="" srcset="">
			</div>
			<div class="login">
				<a href="">登录</a><a href="">注册</a>
			</div>
		</div>
		<div class="main">
			<div>
				<ul class="left">
					<li><a href="">公司介绍</a></li>
					<li><a href="">新闻动态</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
					<li><a href="">公司介绍</a></li>
				</ul>
				<div class="right">
					<h1>友情链接</h1>
					<ul>
						<li><img src="./img/lk_logo01.jpg" alt=""></li>
						<li><img src="./img/lk_logo02.jpg" alt=""></li>
						<li><img src="./img/lk_logo03.jpg" alt=""></li>
						<li><img src="./img/lk_logo04.jpg" alt=""></li>
						<li><img src="./img/lk_logo05.jpg" alt=""></li>
						<li><img src="./img/lk_logo06.jpg" alt=""></li>
						<li><img src="./img/lk_logo07.jpg" alt=""></li>
						<li><img src="./img/lk_logo08.jpg" alt=""></li>
						<li><img src="./img/lk_logo09.jpg" alt=""></li>
						<li><img src="./img/lk_logo01.jpg" alt=""></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom">
			底部.......
		</div>
	</body>
</html>